<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<style>
.mytable td {
	padding: 8px;
}
</style>
<script type="text/javascript">
	var s1,
		s2,
		s4,
		s5;
	$(function() {
		mySubmit("buildingTypes", initBuildingTypes, success3);
		//初始化下拉框,穿行朝向和门朝向在添加的时候初始化
		s4 = $("#keepWarmModality").select2({
				tags : true
			});
		initSelectData4();
		//初始化防水形式下拉框
		initSelectData5();
		s5 = $("#roofingWaterproof").select2({
			tags : true
		});
		//防水形式
		//s5 = $("#roofingWaterproof").select2();
		$("#direction").select2();

		getBuildingTypesData();
		
	});

	//初始化下拉框赋值
	function initSelectData1(doorDirection, i) {
		var pid = parent.parent.pid;
		var ss2 = $("select[name='doorDirection" + i + "']");
		if (doorDirectionList.length == 0) {

			$.getJSON("bulidingNum/type/getDoorDirectionList", {
				pid : pid
			}, function(data, status) {
				if (status == "success") {
					doorDirectionList = data;
					doorDirectInitData(ss2, doorDirection);
				}

			});
		} else {
			doorDirectInitData(ss2, doorDirection);
		}


	}
	function doorDirectInitData(ss2, doorDirection) {
		$.each(doorDirectionList, function(i, v) {
			var html1 = "";
			if (v != null && v != "") {
				html1 = "<option value=\"" + v + "\">" + v + "</option>";
				ss2.append(html1);
			}
		});
		//大门朝向
		ss2.select2({
			tags : true
		});
		if (doorDirection != "" && doorDirection != null) {
			ss2.val(doorDirection).trigger("change");
		}
	}

	//初始化下拉框赋值
	function initSelectData2(trajectionDirection, i) {
		var pid = parent.parent.pid;
		var ss3 = $("select[name='trajectionDirection" + i + "']");
		if (trajectionDirectionList.length == 0) {
			$.getJSON("bulidingNum/type/getTrajectionDirectionList", {
				pid : pid
			}, function(data, status) {
				if (status == "success") {
					trajectionDirectionList = data;
					tradirInitData(ss3, trajectionDirection);
				}
			});
		} else {
			tradirInitData(ss3, trajectionDirection);
		}

	}

	function tradirInitData(ss3, trajectionDirection) {
		$.each(trajectionDirectionList, function(i, v) {
			var html2 = "";
			if (v != null && v != "") {
				html2 = "<option value=\"" + v + "\">" + v + "</option>";
				ss3.append(html2);
			}
		});
		//穿行朝向
		ss3.select2({
			tags : true
		});
		if (trajectionDirection != "" && trajectionDirection != null) {
			ss3.val(trajectionDirection).trigger("change");
		}
	}

	//初始化下拉框赋值


	//初始化下拉框赋值
	function initSelectData4() {
		var pid = parent.parent.pid;
		$.getJSON("bulidingNum/type/getKeepWarmModalityList", {
			pid : pid
		}, function(data, status) {
			if (status == "success") {
				$.each(data, function(i, v) {
					if (v != null && v != "") {
						var html4 = "<option value=\"" + v + "\">" + v + "</option>";
						$("#keepWarmModality").append(html4);
					}
				/* if (i == 0) {
					s4.val(v).trigger("change");
				} */
				});
			}

			//保温形式
			/* s4 = $("#keepWarmModality").select2({
				tags : true
			}); */

		});
	}
	
	//防水形式下拉框初始化
	function initSelectData5() {
		var pid = parent.parent.pid;
		$.getJSON("bulidingNum/type/getRoofingWaterproofList", {
			pid : pid
		}, function(data, status) {
			if (status == "success") {
				$.each(data, function(i, v) {
					if (v != null && v != "") {
						var html5 = "<option value=\"" + v + "\">" + v + "</option>";
						$("#roofingWaterproof").append(html5);
					}
				/* if (i == 0) {
					s4.val(v).trigger("change");
				} */
				});
			}

			//保温形式
			/* s5 = $("#roofingWaterproof").select2({
				tags : true
			}); */

		});
	}
	
	//获取建筑数量列表（建筑名、楼号）
	function getBuildingTypesData() {
		var url = "bulidingNum/type/getBuildingTypesByBId";
		//pid:建筑数量id 预留
		var bid = $("#buildingNumId").val();
		if (bid == null || bid == "") {
			return false;
		}
		$.getJSON(url, {
			buildingNumId : bid
		}, function(data, status) {
			if (status == "success") {
				if (data != null) {
					s4.val(data.keepWarmModality).trigger("change");
					s5.val(data.roofingWaterproof).trigger("change");
					$("#buildingTypes [name='buildingLenandwidth']").val(data.buildingLenandwidth);
					$("#buildingTypes #entityId_buildingTypeId").val(data.id);
					$("#buildingTypes #entityId_wallInfo").val(data.wallInfo);
					if (data.doorInfoList != null) {
						arrSortMinToMax(data.doorInfoList);
						var htm = "";
						for (var i = 0; i < data.doorInfoList.length; i++) {
							var doorId = data.doorInfoList[i].id;
							var doorDirection = data.doorInfoList[i].doorDirection;
							var trajectionDirection = data.doorInfoList[i].trajectionDirection;
							var doorNum = data.doorInfoList[i].doorNum;
							html = "<tr><td width=\"90\"><span class=\"style_btn\">门号</span></td><td><input name=\"doorId\" id=\"entityId_id\" hidden=\"hidden\" value=\"" + doorId + "\"><input value=\"" + doorNum + "\" name=\"doorNum\">"
								+ "</td><td width=\"90\"><span class=\"style_btn\">大门朝向</span></td><td><select  class=\"js-example-tags\" name=\"doorDirection" + i + "\" id=\"doorDirection\" style=\"width:160px;\" >"
								+ "<option value=\"\" selected=\"selected\" >请选择</option></select></td><td width=\"90\"><span class=\"style_btn\">穿行朝向</span></td><td>"
								+ "<select  class=\"js-example-tags\" name=\"trajectionDirection" + i + "\" id=\"trajectionDirection\" style=\"width:160px;\">"
								+ "<option value=\"\" selected=\"selected\" >请选择</option></select>&nbsp;<a data-id=\"" + doorId + "\" href=\"javascript:void(0)\"onclick=\"delTrDoor(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";


							$("#buildingTypes #door").append(html);
							initSelectData1(doorDirection, i); //给下拉框数据赋值
							initSelectData2(trajectionDirection, i); //下拉框数据赋值


						}
					}
					if (data.wallInfo2 != null) {
						var html = "";
						for (var i = 0; i < data.wallInfo2.length; i++) {
							var direction = data.wallInfo2[i].direction;
							var wallDecorate = data.wallInfo2[i].wallDecorate;
							var wallAdhering = data.wallInfo2[i].wallAdhering;
							var roofAdhering = data.wallInfo2[i].roofAdhering;
							var wallId = data.wallInfo2[i].id;
							html = "<tr><td width=\"100\" class=\"td-right\"><strong name=\"direction2\">" + direction + "</strong><span>&nbsp;&nbsp;外墙装饰</span></td><td ><input id=\"\"name=\"wallDecorate\"value=\"" + wallDecorate + "\"/></td>"
								+ "<td width=\"90\"  class=\"td-right\"><span>外墙附着</span></td><td ><input id=\"\"name=\"wallAdhering\"value=\"" + wallAdhering + "\"/></td>"
								+ "<td width=\"90\"  class=\"td-right\"><span>屋面附着</span></td><td ><input id=\"\"name=\"roofAdhering\"value=\"" + roofAdhering + "\"/><input type=\"hidden\"id=\"entityId_wallId\"name=\"wallId\"value=\"" + wallId + "\"/>"
								+ "&nbsp;<a data-id=\"" + wallId + "\" href=\"javascript:void(0)\"onclick=\"delTr(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
							$("#buildingTypes #wall").append(html);
						}
					}
					//设置只读
					$("#buildingTypes").find("input,textarea").attr("readonly", true);
					$("#buildingTypes").find("select").attr("disabled", true);
					$("#buildingTypes .icon-fullscreen").hide();
					$("#buildingTypes .addbtn").attr("disabled", true);
					//隐藏按钮
					$("#buildingTypes #btn_div2").show();
					$("#buildingTypes #btn_div1").hide();
				}
			} else {
				//隐藏按钮
				$("#buildingTypes #btn_div2").hide();
				$("#buildingTypes #btn_div1").show();
			}
		});
	}

	var optBuildingTypes;
	//optBuildingTypes操作字段，0：临时保存；1：新增；2：修改
	function saveBuildingTypes(val) {
		optBuildingTypes = val;
		if (val == 3) {
			//解除锁定状态
			var index = layer.confirm('确定开启编辑状态？', {
				offset : '20%',
				shade : 0
			}, function() {
				//去除只读开启按钮编辑
				$("#buildingTypes").find("input,textarea").attr("readonly", false);
				$("#buildingTypes").find("select").attr("disabled", false);
				$("#buildingTypes #modifyBtn").hide();
				$("#buildingTypes .icon-fullscreen").show();
				$("#buildingTypes .addbtn").attr("disabled", false);
				$("#buildingTypes .hidbtn").addClass("showbtn");
				//$("#directStatus").css("display","");
				layer.close(index);
			});
		} else {

			$("#buildingTypes").submit();
		}
	}
</script>
<form class="cmxform" id="buildingTypes" method="post"
	action="bulidingNum/type/add">
	<div style="padding:0px">
		<!-- 建筑形式start -->
		<div class="panel panel-default">
			<div class="panel-body">
				<table cellpadding="0" cellspacing="0" class="mytable" id="door"
					style="border: 1px solid grey;">
					<tr>
						<td width="90"><span class="style_btn">门</span></td>
						<td colspan="5"><a
							class="btn btn-danger radius a_font addbtn"
							onclick="addTrDoor(this)"> 添加</a></td>
					</tr>

				</table>
				<table cellpadding="10" cellspacing="5" class="mytable">
					<tr>
						<td width="90"><span class="style_btn">建筑规格</span></td>
						<td colspan="3"><textarea style="width:80%;" rows="3"
								maxlength="200" name="buildingLenandwidth"
								id="buildingLenandwidth" onkeydown="checkMaxInput(this,200)"
								onkeyup="checkMaxInput(this,200)"
								onfocus="checkMaxInput(this,200)"
								onblur="checkMaxInput(this,200);resetMaxmsg()"></textarea></td>
					</tr>
					<tr>

						<td width="90"><span class="style_btn">保温形式</span></td>
						<td><select class="js-example-tags" name="keepWarmModality"
							id="keepWarmModality" style="width:160px;">
								<option value="">请选择</option>
						</select></td>
						<td width="90"><span class="style_btn">防水形式</span></td>
						<td><select class="js-example-tags" name="roofingWaterproof"
							id="roofingWaterproof" style="width:160px;">
								<option value="">请选择</option>
								<!-- <option value="外墙防水">外墙防水</option>
								<option value="屋面防水">屋面防水</option> -->
						</select></td>
					</tr>

				</table>
				<table id="wall" class="mytable">
					<tr>
						<td width="90"><span class="style_btn">屋面附着</span></td>
						<td colspan="5" >
						 <a class="btn btn-danger radius a_font addbtn"
							onclick="showDirect()"> 添加</a></td>
					</tr>
					<tr id="directStatus" style="display:none">
						<td width="90"><span class="style_btn">朝向</span></td>
						<td colspan="5" ><select class="js-example-tags"
							name="direction" id="direction"
							style="width:160px;margin-bottom:0px;" >
								<option value="东">东</option>
								<option value="南">南</option>
								<option value="西">西</option>
								<option value="北">北</option>
						</select>
						 <a class="btn btn-danger radius a_font addbtn"
							onclick="addTrWall(this)"> 添加</a></td>
					</tr>
				</table>
			</div>
		</div>
		<input type="hidden" id="entityId_buildingTypeId" name="id" />
		<!-- 建筑形式主键id -->
		<input type="hidden" id="entityId_wallInfo" name="wallInfo" />
		<!-- 墙面信息外键id -->
		<!--建筑形式end -->
		<div style="width:100%;text-align:center; padding-top:20px">
			<div id="btn_div1">
				<button class="btn btn-danger radius my-btn"
					onclick="saveBuildingTypes(0)" type="button">提交</button>
				<button class="btn btn-danger radius my-btn"
					onclick="saveBuildingTypes(1)" type="button">保 存</button>
				<a class="btn btn-default radius"
					onClick="resetForms('buildingTypes');"> 重置 </a> <br />
			</div>
			<div id="btn_div2" style="display:none;">
				<shiro:hasPermission name="permission:edit">
					<button id="modifyBtn" type="button"
						class="btn btn-danger radius my-btn" onclick="saveBuildingTypes(3)">启用编辑</button>
					<button class="btn btn-danger radius my-btn hidbtn"
						onclick="saveBuildingTypes(2)" type="button">保存修改</button>
					<button class="btn btn-default radius hidbtn" type="button"
						onClick="resetForms('buildingTypes');">重置</button>
				</shiro:hasPermission>
			</div>
		</div>

	</div>
</form>

<script type="text/javascript">
	var doorDirectionList=[];//大门朝向
	var trajectionDirectionList=[];//穿行朝向
	$(function() {
		$(".a_font").css("color", "#fff");
	/* $(".js-example-tags").select2({
		 tags: true
	}); */
	});
	//更改朝向添加选项
	function showDirect(){
		var directStatus=$("#directStatus").css("display");
		if(directStatus=="none"){
			$("#directStatus").show();
		}
	}
	//动态表格
	function addTrWall(obj) {
		var direction = $("#direction").val();
		var html = "";
		var $t = $("#wall tr");
		$.each($t, function(i, v) {
			var purpose = $(v).find("strong").text();
			if (direction == purpose) {
				alert("该方位已存在！");
				html = "";
				return false;
			} else {
				html = "<tr><td width=\"100\" class=\"td-right\"><strong name=\"direction2\">" + direction + "</strong><span>&nbsp;&nbsp;外墙装饰</span></td><td ><input type=\"type\" id=\"\"name=\"wallDecorate\"value=\"\"/></td>"
					+ "<td width=\"90\" class=\"td-right\"><span>外墙附着</span></td><td ><input type=\"type\"id=\"\"name=\"wallAdhering\"value=\"\"/></td>"
					+ "<td width=\"90\" class=\"td-right\"><span>屋面附着</span></td><td ><input type=\"type\"id=\"\"name=\"roofAdhering\"value=\"\"/>"
					+ "&nbsp;<a href=\"javascript:void(0)\"onclick=\"delTr(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
			}
		});
		$(obj).parent().parent().parent().append(html);
	}


	//存储将要删除的id，传到后台删除
	var delWallInfoIds = new Array();
	var delDoorInfoIds = new Array(); //门删除id
	function delTr(obj) {
		var id = $(obj).attr("data-id");
		delWallInfoIds.push(id);
		$(obj).parent().parent().remove();
		layer.msg("点击保存后，将彻底删除该条数据！");
	}
	function delTrDoor(obj) {
		var id = $(obj).attr("data-id");
		delDoorInfoIds.push(id);
		$(obj).parent().parent().remove();
		layer.msg("点击保存后，将彻底删除该条数据！");
	}
	

	var bti;
	//封装表单数据为json
	function initBuildingTypes() {
		bti = layer.load(2);
		//封装基本数据

		var buildingLenandwidth = $("[name='buildingLenandwidth']").val();
		var keepWarmModality = $("select[name='keepWarmModality']").val();
		var roofingWaterproof = $("select[name='roofingWaterproof']").val();
		var buildingTypeId = $("#buildingTypes #entityId_buildingTypeId").val();
		var wallInfo = $("#buildingTypes #entityId_wallInfo").val();

		//封装墙面数据
		var $t = $("#wall tr:gt(1)");
		var wall = new Array();
		$.each($t, function(i, v) {
			var direction2 = $(v).find("strong[name='direction2']").text();
			var wallDecorate = $(v).find("input[name='wallDecorate']").val();
			var wallAdhering = $(v).find("input[name='wallAdhering']").val();
			var roofAdhering = $(v).find("input[name='roofAdhering']").val();
			var id = $(v).find("input[name='wallId']").val();
			wall.push({
				direction : direction2,
				wallDecorate : wallDecorate,
				wallAdhering : wallAdhering,
				roofAdhering : roofAdhering,
				id : id
			});
		});
		//封装门数据
		var $t = $("#door tr:gt(0)");
		var door = new Array();
		$.each($t, function(i, v) {
			var doorDirection = $(v).find("select[name^='doorDirection']").val();
			var trajectionDirection = $(v).find("select[name^='trajectionDirection']").val();
			var doorNum = $(v).find("input[name='doorNum']").val();
			var id = $(v).find("input[name='doorId']").val();
			door.push({
				doorDirection : doorDirection,
				trajectionDirection : trajectionDirection,
				doorNum : doorNum,
				id : id
			});
		});

		var buildingType = new Array();
		buildingType.push({
			buildingLenandwidth : buildingLenandwidth,
			keepWarmModality : keepWarmModality,
			roofingWaterproof : roofingWaterproof,
			wallInfo2 : wall,
			fkBuildingTypes : '${requestScope.buildingNum.buildingTypes}',
			id : buildingTypeId,
			opt : optBuildingTypes,
			wallInfo : wallInfo,
			doorInfoList : door
		});
		var formData = {
			buildingTypes2 : buildingType,
			delWallInfoIds : delWallInfoIds,
			delDoorInfoIds : delDoorInfoIds
		};
		return formData;
	}

	//成功后调用方法
	function success3(responseText) {
		layer.close(bti);
		if (responseText.success) {
			/* getBuildingTypesData();
			$("#buildingTypes #wall tr:gt(0)").remove();
			$("#buildingTypes #door tr:gt(0)").remove();
			$("#buildingTypes #modifyBtn").show();
			$("#buildingTypes .hidbtn").removeClass("showbtn");
			//显示当前tab
			$("#BN>li:eq(3) a").tab("show"); */
			
			layer.alert("保存成功！", {
					offset:'20%',
					shade:0.1
				}, function() {
					parent.tabTypeShow=3;
        			location.reload();
				});
			layer.close(bti);
		} else {
			alert('保存失败！');
			layer.closeAll();
		}
	}
	//添加多个门
	//动态表格
	function addTrDoor(obj) {
		var html = "";
		var $t = $("#door tr");
		$.each($t, function(i, v) {
			html = "<tr><td width=\"90\"><span class=\"style_btn\">门号</span></td><td><input name=\"doorId\" hidden=\"hidden\"><input value=\"\" name=\"doorNum\">"
				+ "</td><td width=\"90\"><span class=\"style_btn\">大门朝向</span></td><td><select  class=\"js-example-tags\" name=\"doorDirection22\" id=\"doorDirection\" style=\"width:160px;\" >"
				+ "<option value=\"\" selected=\"selected\" >请选择</option></select></td><td width=\"90\"><span class=\"style_btn\">穿行朝向</span></td><td>"
				+ "<select  class=\"js-example-tags\" name=\"trajectionDirection22\" id=\"trajectionDirection\" style=\"width:160px;\">"
				+ "<option value=\"\" selected=\"selected\" >请选择</option></select>&nbsp;<a href=\"javascript:void(0)\"onclick=\"delTrDoor(this)\"><i class=\"icon-fullscreen\"></i></a></td></tr>";

		});
		$(obj).parent().parent().parent().append(html);
		initSelectData1("",22); //给下拉框数据赋值
		initSelectData2("",22); //下拉框数据赋值
		
	}
	
	//从小到大排序
	function arrSortMinToMax(data){
		var arr = new Array('0','1','2','3','4','5','6','7','8','9');
		var arr2 = new Array('一','二','三','四','五','六','七','八','九','十');
		var oldData = data;
		var flag = false;
		//汉字替换数字
		$.each(data,function(i,v){
			//现在只能排序“单元”的数据，其他的单位的数据暂时先不做处理
			if(v.doorNum.indexOf('单元')!=-1){
				flag = true;
				$.each(arr2,function(j,d){
					var regExp=new RegExp(arr2[j],"gmi");
					v.doorNum = v.doorNum.replace(regExp,arr[j]);
				});
			}else{
				return false;
			}
		});
		//排序
		data.sort(function(a,b){  
	        return parseInt(a.doorNum) - parseInt(b.doorNum)>0;  
	    });
		//数字替换为汉字
		if(flag){
			 $.each(data,function(i,v){
				$.each(arr,function(j,d){
					var regExp=new RegExp(arr[j],"gmi");
					v.doorNum = v.doorNum.replace(regExp,arr2[j]);
				});
			});
		}
	}
</script>


